<!-- 鼠标移动到图片上的操作 -->
<!-- 鼠标移动到图片上的操作 -->
<template>
  <div class="hover-aciton" :style="{ width: newWidth, height: newHeight }">
    <div v-if="uploadStatus === 1" class="label">
      <el-icon color="#ffffff" size="18" style="margin-top: 8px; transform: rotate(-45deg)">
        <icon-ep-check></icon-ep-check>
      </el-icon>
    </div>
    <div v-if="uploadStatus === -1" class="label" style="background: var(--el-color-danger)">
      <el-icon color="#ffffff" size="16" style="margin-top: 8px; transform: rotate(-45deg)">
        <icon-ep-close></icon-ep-close>
      </el-icon>
    </div>
    <template v-if="uploadStatus === 1">
      <div v-if="uploadStatus === 1" class="action-box" :style="{ width: newWidth, height: newHeight }">
        <el-button v-if="isImageUrl(url)" :icon="IconSolarMagniferZoomInLinear" type="primary" circle @click="previewImageClick()"></el-button>
        <el-button
          v-if="isVideoUrl(url)"
          key="el-button-2"
          :icon="IconSolarPlayLinear"
          style="margin-left: 0"
          type="primary"
          circle
          @click="previewVideoClick()"
        ></el-button>
        <el-button :icon="IconSolarTrashBinTrashLinear" style="margin-left: 0" type="danger" circle @click="deleteImageClick()"></el-button>
      </div>
      <base-image class="img" :src="poster || url" :style="{ width: newWidth, height: newHeight }"></base-image>
    </template>
    <el-progress v-else-if="uploadStatus === 0" type="circle" :width="maxImageSize * 0.8" :percentage="percentage"></el-progress>
    <div v-else class="icon-box">
      <el-icon size="30" color="var(--el-color-danger)"><icon-ep-circle-close-filled></icon-ep-circle-close-filled></el-icon>
      <span class="err-text">
        {{ uploadErrorMsg || '上传出错' }}
      </span>
      <div class="action-box" :style="{ width: newWidth, height: newHeight }">
        <el-button :icon="SolarRefreshLinear" type="primary" circle @click="reUploadClick()"></el-button>
        <el-button :icon="IconSolarTrashBinTrashLinear" style="margin-left: 0" type="danger" circle @click="deleteImageClick()"></el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" generic="T extends string">
  import IconSolarTrashBinTrashLinear from '~icons/solar/trash-bin-trash-linear';
  import SolarRefreshLinear from '~icons/solar/refresh-linear';
  import IconEpClose from '~icons/ep/close';
  import IconEpCheck from '~icons/ep/check';
  import IconEpCircleCloseFilled from '~icons/ep/circle-close-filled';
  import IconSolarPlayLinear from '~icons/solar/play-linear';
  import IconSolarMagniferZoomInLinear from '~icons/solar/magnifer-zoom-in-linear';
  import { isImageUrl, isVideoUrl } from '@/utils/file';

  const props = defineProps({
    /** 文件url */
    url: { type: String, default: '' },
    /** 文件海报或者缩略图 */
    poster: { type: String, default: '' },
    /** 宽度 */
    width: { type: Number, default: 100 },
    /** 高度 */
    height: { type: Number, default: 100 },
    /** 进度百分比 */
    percentage: { type: Number, default: 0 },
    /** 上传状态 0:正在上传; 1:上传成功; -1:上传失败; */
    uploadStatus: { type: Number as PropType<-1 | 0 | 1>, default: 0 },
    /** 上传失败原因 */
    uploadErrorMsg: { type: String, default: '' },
  });
  const emit = defineEmits<{
    (e: 'previewImage'): void;
    (e: 'previewVideo'): void;
    (e: 'delete'): void;
    (e: 'reUpload'): void;
  }>();
  const newWidth = computed(() => `${props.width}px`);
  const newHeight = computed(() => `${props.height}px`);
  // 得到最小边
  const maxImageSize = computed(() => Math.min(props.width, props.height));
  /**
   * 预览视频
   */
  function previewVideoClick() {
    emit('previewVideo');
  }

  /**
   * 预览图片
   */
  function previewImageClick() {
    emit('previewImage');
  }

  /**
   * 删除图片
   */
  function deleteImageClick() {
    emit('delete');
  }

  /**
   * 重新上传
   */
  function reUploadClick() {
    emit('reUpload');
  }
</script>

<style lang="scss" scoped>
  .hover-aciton {
    @include flex(row, nowrap, center, center, center);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;

    .action-box {
      @include flex(row, nowrap, space-around, center, center);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      padding: 2px;
      background: var(--el-overlay-color-lighter);
      opacity: 0;
      transition: all 0.3s;
    }

    .label {
      position: absolute;
      top: -6px;
      right: -15px;
      z-index: 2;
      width: 40px;
      height: 24px;
      text-align: center;
      background: var(--el-color-success);
      transition: all 0.2s;
      transform: rotate(45deg);
    }

    &:hover {
      .action-box {
        opacity: 1;
      }

      .label {
        opacity: 0;
      }
    }
  }

  .icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 6px;
    background: var(--el-color-danger-light-9);

    .err-text {
      padding: 6px;
      font-size: 10px;
      line-height: 14px;
      color: var(--el-color-danger);
      text-align: center;
      word-break: break-all;
      word-wrap: break-word;
    }
  }

  html.dark .hover-aciton .img {
    opacity: 0.6;
  }
</style>
